<template>
	<div class="zl_pc_part">
		<div class="zl_header">
			<zl_header :canPlay="canPlay"></zl_header>
		</div>
		<div class="flex justify_content_sb padding_120 content-box">
			<div class="MainLeft MainLeft_700 MainLeft_right_10">
				<div class="tageBox tageBoxZL">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane
							:label="
								localLanguage == 2
									? item.name_en
										? item.name_en
										: item.name
									: item.name
							"
							:name="item.id + ''"
							v-for="(item, categoryListsIndex) in categoryLists"
							:key="categoryListsIndex + 'cat'"
						>
							<div v-if="articleList.length > 0" class="wzitem_main">
								<div
									class="zl_articleList_pc align_items_c pointer"
									v-for="(items, articleListIndexs) in articleList"
									:key="articleListIndexs + 'art'"
								>
									<router-link
										target="_blank"
										:to="{ name: '/gw_detail', params: { id: items.id } }"
									>
										<wzitem :item="items"></wzitem>
									</router-link>
								</div>
								<div
									class="zl_articleList_app"
									v-for="(items, articleListIndexs1) in articleList"
									:key="articleListIndexs1 + 'arti'"
								>
									<router-link
										target="_blank"
										:to="{ name: '/gw_detail', params: { id: items.id } }"
									>
										<PerNews :item="items"></PerNews>
									</router-link>
								</div>
								<scrollToBottom @reachBottom="getDataListPage"></scrollToBottom>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<div class="zl_right_MainRight">
				<div class="zl_right_header">
					<div
						class="zl_right_header_item pointer"
						@click="rightListClick(0)"
						:class="{
							zl_right_header_item_active: right_header_current_item == 0,
						}"
					>
						人气之王
					</div>
					<div
						class="zl_right_header_item pointer"
						@click="rightListClick(1)"
						:class="{
							zl_right_header_item_active: right_header_current_item == 1,
						}"
					>
						笔耕不辍
					</div>
					<div
						class="zl_right_header_item pointer"
						@click="rightListClick(2)"
						:class="{
							zl_right_header_item_active: right_header_current_item == 2,
						}"
					>
						初来乍到
					</div>

					<div
						class="zl_right_header_more pointer"
						@click="rightListMoreClick()"
					>
						更多作者>>
					</div>
				</div>
				<div class="zl_right_list">
					<div
						class="zl_articleList_pc align_items_c pointer"
						v-for="(item, index) in authorLists"
						:key="index + 'art'"
					>
						<div style="margin-top: 22px"></div>
						<authorArticle :item="item" :index="index"></authorArticle>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import { myMixin } from "@/utils/mixin.js";

import {
	getArticleList,
	categoryLists,
	hotColumns,
	getAuthorList,
} from "@/api/home";
import { timeItem } from "../../components/pc/timeItem.vue";

import { followAuthor } from "@/api/user";
import { getToken } from "@/utils/auth";
import PerNews from "../home/mobile/perNews";
import wzitem from "./../../components/pc/wzitem.vue";
import download from "./../../components/pc/download.vue";
import hotArticle from "../home/hotArticle.vue";
import authorArticle from "./../../components/pc/authorArticle.vue";
import authorList from "../../components/pc/authorList.vue";
import { newBus } from "../../components/pc/topHeader2.vue";
import modulePart from "../../components/modulePart.vue";
import zl_header from "./zl_header.vue";
import TopSwiper from "@/components/topSwiper";
export default {
	mixins: [myMixin],

	name: "",
	components: {
		PerNews,
		wzitem,
		download,
		hotArticle,
		authorList,
		modulePart,
		TopSwiper,
		timeItem,
		authorArticle,
		zl_header,
	},
	data() {
		return {
			activeName: "0",
			articleList: [],
			categoryLists: [],
			noticeLists: [],
			authorLists: [],
			page: 1,
			size: 25,
			total: "",
			loading: false,
			hotCurrentIndex: 1,
			hotCurrentIndexLeft: "0-0",
			localLanguage: 1,
			right_header_current_item: 0,
			canPlay: false,
		};
	},
	methods: {
		rightListMoreClick() {
			this.$router.push({ path: "/columnlist" });
		},
		rightListClick(index) {
			this.right_header_current_item = index;
			getAuthorList({
				type: index + 1,
				dateType: 1,
			})
				.then((res) => {
					if (res.code == 200) {
						this.authorLists = res.data.list;

						for (let index = 0; index < this.authorLists.length; index++) {
							const element = this.authorLists[index];
							element.release_time = this.$utils.convertToLocalTime(
								element.release_time
							);
						}
						this.total = res.data.total;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},

		showUrl(url) {
			window.open(url, "");
		},
		gotoMy() {
			const hasToken = getToken();
			// console.log(hasToken);
			if (hasToken) {
				this.$router.push({ path: "/publish", query: {} });
			} else {
				this.$PromptTip({ dialogVisible: true, showStatus: 1 });
			}
		},
		handleClick(val) {
			this.page = 1;
			this.articleList = [];
			this.getArticleList(
				{ category_id: val.name, type: 5, page: this.page, size: this.size },
				0
			);
		},
		getDataListPage() {
			if (this.loading) {
				return;
			}
			if (this.page >= Math.ceil(this.total / this.size)) {
				return;
			}
			this.loading = true;
			this.page = this.page + 1;
			this.getArticleList(
				{
					category_id: this.activeName,
					type: 5,
					page: this.page,
					size: this.size,
				},
				0
			);
		},
		getArticleList(obj, type) {
			getArticleList(obj)
				.then((res) => {
					if (res.code == 200) {
						this.loading = false;
						if (obj.page == 1) {
							this.articleList = res.data.list;
						} else {
							this.articleList = this.articleList.concat(res.data.list);
						}
						this.total = res.data.total;
					} else {
					}
					if (obj["category_id"] == 0 && obj["page"] == 1) {
						// this.canPlay = true;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},
		getCategortLists() {
			categoryLists({ type: 5 })
				.then((res) => {
					if (res.code == 200) {
						this.categoryLists = res.data;
						var cate = { id: 0, name: "全部", name_en: "All" };
						this.categoryLists.unshift(cate);
					} else {
					}
				})
				.catch((error) => {});
		},
	},
	mounted() {
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
		this.rightListClick(0);
	},
	created() {
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
		this.getCategortLists();
		this.activeName = 0 + "";
		this.getArticleList(
			{
				category_id: this.activeName,
				type: 5,
				page: this.page,
				size: this.size,
			},
			0
		);
	},
};
</script>

<style>
.followMeta {
	font-size: 12px;
	color: #ffffff;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: 0em;

	width: 70px;
	height: 26px;
	border-radius: 8px;
	opacity: 1;
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
}

.tageBox {
	/* margin-top: 20px; */
}
.zl_articleList_pc {
	display: contents;
}
.zl_articleList_app {
	display: none;
}

.chanyeTitle .rsTitle {
	margin-top: 0 !important;
}
.zl_hotCurrent_line {
	margin-left: 39px;
	margin-top: -2px;
	width: 522px;
	height: 1px;
	opacity: 1;
	background: #e5e9fb;
}
.zl_hotCurrent_current {
	position: absolute;
	bottom: 0;
	width: 82px;
	height: 2px;
	opacity: 1;
	display: none;
	/* 主色（一级颜色） */
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
}
.zl_pc_part .zl_author_articles_main {
	background: transparent;
	padding-top: 26px;
	padding-top: 20px;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	display: flex;
	align-items: baseline;
	border-radius: 0;
	gap: 0px;
	border-bottom: 1px solid rgba(225, 227, 241, 0.5);
}
.zl_pc_part .zl_author_articles_item {
	width: 50%;
	height: auto;
	opacity: 1;
	flex-grow: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.zl_author_articles_item_point {
	margin-left: 39px;
	margin-top: 2px;
	width: 6px;
	height: 6px;
	opacity: 1;
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
	border-radius: 3px;
}
.zl_pc_part .title-box {
	align-items: baseline;
}

.zl_pc_part .zl_author_articles_item_title {
	margin-left: 13px;
	width: auto;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(14px, calc(100vw * 18 / 1440), 18px);
	font-weight: normal;
	line-height: clamp(14px, calc(100vw * 30 / 1440), 30px);
	color: #fff;

	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.zl_pc_part .zl_author_articles_item_time {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	color: #fff;
	margin-top: 10px;
	margin-left: 58px;
	border-left: 1px solid #fff;
	padding-left: 10px;
}

.release-connent img {
	width: 100%;
}
.zl_pc_part .el-carousel__arrow--left {
	left: 0;
}
.zl_pc_part .el-carousel__arrow--right {
	right: 0;
}
.zl_pc_part .MainLeft .el-carousel__container {
	height: 250px;
}
</style>

<style scoped>
.MainLeft {
	border-right: 1px solid rgba(216, 216, 216, 0.4);
}
.pcPart .banner-herder {
	width: 100%;
	padding-top: clamp(20px, calc(100vw * 30 / 1440), 30px);
	padding-bottom: clamp(10px, calc(100vw * 75 / 1440), 75px);
	box-sizing: border-box;
	background-image: url("https://res.metaera.hk/resources/assets/images/jianbian.png");
	background-size: cover;
	background-position: center;
}

.banner-box {
	margin: 0 auto;
	width: clamp(100px, calc(100vw * 1200 / 1440), 1200px);
	height: clamp(100px, calc(100vw * 400 / 1440), 400px);
}

.pcPart .banner-herder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	overflow: hidden;
}

.content-box {
	padding-top: clamp(40px, calc(100vw * 50 / 1440), 50px);
}

.pcPart .js-FeaturedColumn_container {
	width: 100%;
}
.js-FeaturedColumn_container .js-FeaturedColumn_title {
	height: calc(100vw * 40 / 1440);
	box-sizing: border-box;
	padding-bottom: calc(100vw * 20 / 1440);
	border-bottom: 1px solid rgba(225, 227, 241, 0.5);
}
.js-FeaturedColumn_container
	.js-FeaturedColumn_title
	.js-FeaturedColumn_title-content
	.js-FeaturedColumn_title-info {
	font-size: clamp(20px, calc(100vw * 24 / 1440), 24px);
	line-height: 1;
	font-weight: bold;
	color: #fff;
}
.js-FeaturedColumn_container .js-FeaturedColumn_list {
	width: auto;
	height: auto;
	background: transparent;
	justify-content: flex-start;
	/* border-bottom: 0.5px solid #e5e9fb; */
	padding: 30px 0 0;
	margin: 0 30px;
}
.tageBoxZL {
	/* margin-top: 40px; */
}
.zl_pc_part .js-FeaturedColumn_item {
	width: 16.6%;
	position: relative;
	padding-bottom: 22px;
	height: 100%;
}
.zl_pc_part .js-FeaturedColumn_item-nickname {
	font-size: clamp(10px, calc(100vw * 14 / 1440), 14px) !important;
	color: #fff !important;
	font-weight: 600;
}
.js-FeaturedColumn_item-articles {
	font-size: clamp(10px, calc(100vw * 13 / 1440), 13px) !important;
	color: #fff !important;
	opacity: 0.5;
}
.zl_pc_part .followMeta {
	background: rgba(255, 255, 255, 0.1);
}
</style>

<style scoped>
.MainLeft {
	border-right: 1px solid rgba(216, 216, 216, 0);
}
.zl_right_MainRight {
	padding-left: 10px;
	width: 450px;
	border-left: 1px solid rgba(225, 227, 241, 0.5);
}

.zl_right_header_more {
	font-size: 12px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: normal;
	/* 描边色/描边色辅助 */
	color: #aaaaaa;
}

.zl_right_header_more:hover {
	color: #fff;
}
</style>

<style scoped>
.zl_right_header {
	/* margin-top: 40px; */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.zl_right_header_item {
	height: 34px;
	width: 110px;
	text-align: center;
	align-items: center;
	display: flex;
	align-content: center;
	justify-content: center;
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.8);
	border-radius: 17px;
}

.zl_right_header_item_active {
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	) !important;
}

.zl_right_list {
	padding-top: 20px;
}
</style>
